<template>
  <div class="sub-nav-container" :class="{ fixed: isFixed }">
    <div class="sub-nav-content">
      <!-- 左侧图标和热门标签 -->
      <div class="left-nav">
        <div class="icon-group">
          <img
            src="@/assets/bilibiliavatar.png"
            alt="B站图标"
            class="nav-icon"
            v-if="isFixed"
          />
          <div class="hot-label active">
            <img src="@/assets/icons/动态.svg" alt="动态" class="label-icon" />
            <span>动态</span>
          </div>
          <div class="hot-label">
            <img src="@/assets/icons/热门.svg" alt="热门" class="label-icon" />
            <span>热门</span>
          </div>
        </div>
      </div>

      <!-- 右侧频道导航 -->
      <div class="right-nav">
        <div
          class="channel-item"
          v-for="(channel, index) in channelList"
          :key="index"
          :class="{ active: selectedChannel === index }"
          @click="selectedChannel = index"
        >
          <span>{{ channel }}</span>
        </div>
        <div class="more-icon">
          <img src="@/assets/icons/更多.svg" alt="更多" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, defineComponent } from 'vue'

// 将组件定义为默认导出
defineComponent({
  name: 'SubNavBar',
})

// 固定状态
const isFixed = ref(false)
const selectedChannel = ref(0)

// 频道列表
const channelList = [
  '番剧',
  '国创',
  '综艺',
  '动画',
  '鬼畜',
  '舞蹈',
  '娱乐',
  '科技',
  '美食',
  '汽车',
]

// 监听滚动事件
const handleScroll = () => {
  const scrollTop = window.scrollY
  const navBarPosition = 220 // 根据页面布局确定的标签栏位置

  isFixed.value = scrollTop > navBarPosition
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped lang="scss">
.sub-nav-container {
  width: 100%;
  background-color: transparent;
  z-index: 90;
  height: 46px;
  margin-top: 20px;
  margin-bottom: 20px;

  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    animation: slideDown 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    background-color: #fff;
    border-bottom: 1px solid #e7e7e7;
  }

  .sub-nav-content {
    max-width: 1500px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;

    .left-nav {
      display: flex;
      align-items: center;

      .icon-group {
        display: flex;
        align-items: center;

        .nav-icon {
          width: 32px;
          height: 32px;
          margin-right: 15px;
          border-radius: 50%;
        }

        .hot-label {
          display: flex;
          align-items: center;
          padding: 0 10px;
          margin-right: 15px;
          font-size: 14px;
          color: #18191c;
          cursor: pointer;
          height: 46px;

          .label-icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            color: #18191c;
          }

          &.active {
            color: #fb7299;
            font-weight: bold;
            border-bottom: 2px solid #fb7299;

            .label-icon {
              color: #fb7299;
            }
          }

          &:hover {
            color: #fb7299;

            .label-icon {
              color: #fb7299;
            }
          }
        }
      }
    }

    .right-nav {
      display: flex;
      align-items: center;
      overflow-x: auto;
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */

      &::-webkit-scrollbar {
        display: none;
      }

      .channel-item {
        padding: 0 12px;
        font-size: 14px;
        color: #18191c;
        cursor: pointer;
        height: 46px;
        display: flex;
        align-items: center;
        white-space: nowrap;

        &.active {
          color: #fb7299;
          font-weight: bold;
          border-bottom: 2px solid #fb7299;
        }

        &:hover {
          color: #fb7299;
        }
      }

      .more-icon {
        margin-left: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        height: 46px;
        padding: 0 5px;

        img {
          width: 18px;
          height: 18px;
          color: #18191c;

          &:hover {
            color: #fb7299;
          }
        }
      }
    }
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}
</style>
